<template>
	<view>
		<mh-navbar custom title="兑换" fixed center zIndex="1010" />
		<view>
			<image src="/static/img/exchange/banner.png" style="width: 100%;height: 150px;" >
		</view>
		<view class="sortbar-container rowRangeAve borderBox">
				<block v-for="(items,index) in sortList" :key="index">
					<!-- 排序方式 -->
					<view class="sortItems-container rowRanges" :class="sortCurrent==index?'sortItems-container-active':''" @click="selectSort(index)">
						<view class="sortname">
							{{items.sortname}}
						</view>
						<!-- 价格 -->
						<view class="defImg directionbox" v-if="index==2">
							<image v-if="sortCurrent!=2 " src="/static/img/exchange/sort.svg" mode=""></image>
							<block v-else>
								<image v-if="saleUp" src="/static/img/exchange/asce.svg" mode=""></image>
								<image v-else src="/static/img/exchange/desc.svg" mode=""></image>
							</block>
						</view>
					</view>
				</block>
				<view class="integral-wrap vertical-center">
					<image src="/static/img/exchange/integral.png" style="width: 16px;height: 16px;flex-shrink: 0;"></image>
					<view class="my-integral">{{integral}}积分</view>
				</view>
		</view>
		<view class='good-container'>
			<view class='good-wrap' v-for="(item,index) in exchangeList" v-if="exchangeList.length > 0" :key="index" @click="onExchange(item)">
				<view class="rowCenter">
					<image :src="appUrl + item.img" style="width: 100px;height: 100px;" ></image>
				</view>
				<view class="good-desc">
					<view class="good-name">{{item.name}}</view>
					<view class="good-integral">{{item.integral}} 积分</view>
					<view class="good-quantity">已兑换 {{item.quantity}}份</view>
				</view>
			</view>
		</view>
		<view v-if="isExchange">
			<view class="mask"></view>
			<view class="popup-exchange-container">
				<view class="popup-exchange-img">
					<image src="/static/img/common/close.png" style="width: 32px;height: 32px;" @click="onCloseExchange()"></image>
				</view>
				<view class="popup-exchange-good">
					<image :src="appUrl + selectGood.img" style="width: 100px;height: 100px;" ></image>
				</view>
				<view class="popup-exchange-name">
					{{selectGood.name}}
				</view>
				<view class="popup-exchange-price">
					价值{{selectGood.price}}元
				</view>
				<view class="popub-sign-footer">
					<view class="popub-sign-button">
						<u-button shape="circle" @click="goExchange" type="warning">{{selectGood.integral}}积分 直接兑换</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appUrl:this.$store.state.vuex_config.appUrl,
				sortCurrent: '',
				saleUp: false,
				//排序类型
				sortType: '0',
				sortList:[{"sortname":"综合排序"},{"sortname":"兑换数量"},{"sortname":"积分"}],
				exchangeList:[],
				isExchange:false,
				selectGood:{},
				//用户积分
				integral:0,
			}
		},
		created() {
			this.getExchangeList();
			this.getUserInfo();
		},
		methods: {
			getUserInfo(){
				this.$u.api.user.info().then(res => {
					if (res.code == 200){
						this.integral=res.data.integral;
					}
				});
			},
			//切换排序方式
			selectSort(idx) {
				this.sortCurrent = idx
				this.currentPage = 1
				this.goodsList = []
				if (idx == 0) {
					this.sortType = '0'
				} else if (idx == 1) {
					this.sortType = '1'
				} else if (idx == 2) {
					this.saleUp = !this.saleUp
					if (this.saleUp) {
						this.sortType = '2'
					} else {
						this.sortType = '3'
					}
				}
				this.$nextTick(() => {
					this.getExchangeList();
				})
			},
			getExchangeList(){
				this.$u.api.exchanges({sort:this.sortType}).then(res => {
					if (res.code == 200){
						this.exchangeList = res.data;
					}
				});
			},
			onExchange(item){
				this.selectGood = item;
				this.isExchange = true;
			},
			onCloseExchange(){
				this.isExchange = false;
			},
			goExchange(){
				debugger
				console.info(this.selectGood);
				// 加密传递的对象数据
				var obj = new Object();
			    obj.exchangeId = this.selectGood.exchangeId;
				obj.name = this.selectGood.name;
				obj.img = this.selectGood.img;
				obj.integral = this.selectGood.integral;
				obj.price = this.selectGood.price;
				let item = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: 'pages/exchange/convert?goodInfo=' + item
				})
			}
		}
	}
</script>

<style lang="scss">
.sortbar-container {
	z-index: 10;
	left: 0;
	width: 100%;
	height: 80rpx;
	background-color: #FFFFFF;
	padding: 0 50rpx;
	.sortItems-container {
		width: 100px;

		.sortname {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.directionbox {
			width: 25rpx;
			height: 35rpx;
			margin-left: 5rpx;
		}
	}

	.sortItems-container-active {
		.sortname {
			color: #FF4242;
		}
	}

	.couponSort {
		.leftContent {
			.nocoupon {
				width: 30rpx;
				height: 30rpx;
				background: #FFFFFF;
				border: 1rpx solid #BFBFBF;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.icon-box {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.textContent {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
}

.integral-wrap{
	width: 100px;
	height: 30px;
	background: #dbd2d2;
	border-radius: 30px;
	display: flex;
	flex-wrap: nowrap;
	padding: 0 15px 0 15px;
	.my-integral{
		color: #2e73ff;
		flex-shrink: 0;
	}
}
.good-container{
	display:flex;
	flex-wrap: wrap;
	padding:10px;
	justify-content: space-between
}
.good-wrap{
	padding:10px;
	width: 49%;
	background: #FFFFFF;
	margin-bottom: 10px;
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
	.good-desc{
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		.good-integral{
			color: red;
		}
		.good-quantity{
			color: #5E5A5A;
		}
	}
}
.mask{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	z-index:888;
	background-color: rgba(0, 0, 0, 0.6);
}
.popup-exchange-container{
	background: #FFFFFF;
    width: 100%;
    height: 300px;
    position: absolute;
    bottom: 0px;
    z-index: 998;
	.popup-exchange-img{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 10px;
		margin-right: 10px;
	}
	.popup-exchange-good{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.popup-exchange-name{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
	}
	.popup-exchange-price{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		color: red;
	}
	.popub-sign-footer{
		position: absolute;
		bottom: 30px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.popub-sign-button{
			width: 90%;
		}
	}
}
</style>
